<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getPermissionList, setRole, getPermission, putRole } from '@/api/system/permission.js'
import { message } from 'ant-design-vue'

import { useRoute } from 'vue-router'
const route = useRoute()

const current = ref(0)
const next = () => {
  current.value++
}
const prev = () => {
  current.value--
}

//表格数据
const steps = [
  {
    title: '角色信息',
    content: 'First-content'
  },
  {
    title: '权限信息',
    content: 'Second-content'
  },
  {
    title: '检查并完成',
    content: 'Last-content'
  }
]

//表单数据
let formState = reactive({
  roleName: '',
  remark: '',
  perms: [[], [], [], [], []]
})

//表单下一步
const onFinish = () => {
  // console.log(values)
  next()
}
//生成所有树状结构的权限
let permissionList1 = ref([])
let permissionList2 = ref([])
let permissionList3 = ref([])
let permissionList4 = ref([])
let permissionList5 = ref([])

//接收路由参数，判断是否是新增或者编辑
// console.log($router)
console.log(route.query.roleId)

//点击节点获取节点的key值(key值已经在之前被设置为id了),写入数组里
const selectedKeys1 = (val) => {
  formState.perms[0] = val
}
const selectedKeys2 = (val) => {
  formState.perms[1] = val
}
const selectedKeys3 = (val) => {
  formState.perms[2] = val
}
const selectedKeys4 = (val) => {
  formState.perms[3] = val
}
const selectedKeys5 = (val) => {
  formState.perms[4] = val
}

//判断是新增还是编辑
const isEdit = ref(false)

//确定（新增）
const isOK = async () => {
  if (isEdit.value) {
    console.log({ ...formState, roleId: route.query.roleId })
    const res = await putRole({ ...formState, roleId: route.query.roleId })
    console.log(res)
    message.success(res.msg)
  } else {
    await setRole(formState)
    message.success('新增成功')
  }
}

//编辑回显
const getPermissionAPI = async (id) => {
  const res = await getPermission(id)
  formState.remark = res.data.remark
  formState.roleName = res.data.roleName
  formState.perms = res.data.perms
  console.log(res)
}

//声明周期渲染所有列表数据
onMounted(async () => {
  const res = await getPermissionList()
  permissionList1.value.push(res.data[0])
  permissionList2.value.push(res.data[1])
  permissionList3.value.push(res.data[2])
  permissionList4.value.push(res.data[3])
  permissionList5.value.push(res.data[4])

  //路由判断是否是新增或者编辑
  if (route.query.roleId) {
    isEdit.value = true
    getPermissionAPI(route.query.roleId)
  } else {
    false
  }
})
</script>
<template>
  <div class="add-role">
    <div class="role-top">
      <a-page-header
        class="demo-page-header"
        style="border: 1px solid rgb(235, 237, 240)"
        :sub-title="isEdit ? '编辑角色' : '新增角色'"
        @back="() => $router.go(-1)"
      >
        <template #extra>
          <a-button key="1" type="primary">黑马管理员</a-button>
        </template>
      </a-page-header>
    </div>
    <div class="role-content">
      <a-row>
        <a-col :span="4" class="role-left">
          <a-steps :current="current" direction="vertical">
            <a-step v-for="item in steps" size="small" :key="item.title" :title="item.title" />
          </a-steps>
        </a-col>
        <a-col :span="16" class="role-right">
          <template v-if="current === 0">
            <div class="col-form">
              <div class="form-content">
                <h4>角色信息</h4>
                <a-form
                  :model="formState"
                  name="basic"
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
                  autocomplete="off"
                  @finish="onFinish"
                  @finishFailed="onFinishFailed"
                >
                  <a-form-item
                    label="角色名称"
                    name="roleName"
                    :rules="[{ required: true, message: '请输入角色名称' }]"
                  >
                    <a-input v-model:value="formState.roleName" />
                  </a-form-item>
                  <a-form-item label="角色描述" name="remark">
                    <a-textarea v-model:value="formState.remark" />
                  </a-form-item>
                  <a-form-item :wrapper-col="{ offset: 2, span: 20 }">
                    <a-button v-if="current < steps.length - 1" type="primary" html-type="submit"
                      >下一步</a-button
                    >

                    <!-- <a-button v-if="current < steps.length - 1" type="primary" @click="next"
              >下一步</a-button
            >
            <a-button
              v-if="current == steps.length - 1"
              type="primary"
              @click="message.success('Processing complete!')"
            >
              提交
            </a-button>
            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button> -->
                  </a-form-item>
                </a-form>
              </div>
            </div>
          </template>
          <template v-else-if="current === 1">
            <div class="col-form">
              <div class="form-content">
                <h4>权限配置</h4>
                <div class="flex">
                  <div>
                    <span class="ele-style">园区管理</span>
                    <a-tree
                      @check="selectedKeys1"
                      v-model:checkedKeys="formState.perms[0]"
                      :fieldNames="{ key: 'id' }"
                      checkable
                      :tree-data="permissionList1"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">行车管理</span>
                    <a-tree
                      @check="selectedKeys2"
                      v-model:checkedKeys="formState.perms[1]"
                      :fieldNames="{ key: 'id' }"
                      checkable
                      :tree-data="permissionList2"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">物业费管理</span>
                    <a-tree
                      @check="selectedKeys3"
                      v-model:checkedKeys="formState.perms[2]"
                      :fieldNames="{ key: 'id' }"
                      checkable
                      :tree-data="permissionList3"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">一体杆管理</span>
                    <a-tree
                      @check="selectedKeys4"
                      v-model:checkedKeys="formState.perms[3]"
                      :fieldNames="{ key: 'id' }"
                      checkable
                      :tree-data="permissionList4"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">系统管理</span>
                    <a-tree
                      @check="selectedKeys5"
                      v-model:checkedKeys="formState.perms[4]"
                      :fieldNames="{ key: 'id' }"
                      checkable
                      :tree-data="permissionList5"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                </div>
                <div class="bottom">
                  <a-button v-if="current < steps.length - 1" type="primary" @click="next"
                    >下一步</a-button
                  >
                  <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
                    >上一步</a-button
                  >
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="current === 2">
            <div class="col-form">
              <div class="form-content">
                <h4>检查并完成</h4>
                <div class="form-content-left">
                  <p>角色名称：{{ formState.roleName }}</p>
                  <p>角色描述：{{ formState.remark }}</p>
                  <p>角色权限：</p>
                </div>
                <div class="flex">
                  <div>
                    <span class="ele-style">园区管理</span>
                    <a-tree
                      v-model:checkedKeys="formState.perms[0]"
                      :fieldNames="{ key: 'id' }"
                      disabled
                      checkable
                      :tree-data="permissionList1"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">行车管理</span>
                    <a-tree
                      v-model:checkedKeys="formState.perms[1]"
                      :fieldNames="{ key: 'id' }"
                      disabled
                      checkable
                      :tree-data="permissionList2"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">物业费管理</span>
                    <a-tree
                      v-model:checkedKeys="formState.perms[2]"
                      :fieldNames="{ key: 'id' }"
                      disabled
                      checkable
                      :tree-data="permissionList3"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">一体杆管理</span>
                    <a-tree
                      v-model:checkedKeys="formState.perms[3]"
                      :fieldNames="{ key: 'id' }"
                      disabled
                      checkable
                      :tree-data="permissionList4"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                  <div>
                    <span class="ele-style">系统管理</span>
                    <a-tree
                      v-model:checkedKeys="formState.perms[4]"
                      :fieldNames="{ key: 'id' }"
                      disabled
                      checkable
                      :tree-data="permissionList5"
                      :defaultExpandAll="true"
                      v-if="permissionList1?.length"
                    >
                      <template #title="{ title, id }">
                        <span>{{ title }}{{ id }}</span>
                      </template>
                    </a-tree>
                  </div>
                </div>
                <div class="bottom">
                  <a-button type="primary" @click="isOK">提交</a-button>
                  <a-button style="margin-left: 8px" @click="prev">上一步</a-button>
                  <!-- <a-button v-if="current == steps.length - 1" type="primary" @click="isOK">提交</a-button>
                <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button> -->
                </div>
              </div>
            </div>
          </template>
          <div class="steps-action">
            <!-- <a-button v-if="current < steps.length - 1" type="primary" @click="next"
              >下一步</a-button
            >
            <a-button
              v-if="current == steps.length - 1"
              type="primary"
              @click="message.success('Processing complete!')"
            >
              提交
            </a-button>
            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button> -->
          </div></a-col
        >
      </a-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.add-role {
  width: 100%;
  min-height: 100vh;
  background-color: rgb(244, 246, 248);
  .role-top {
    background-color: #fff;
    margin-bottom: 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
  }
  .role-content {
    margin-top: 70px;
    padding-top: 30px;
    .role-left {
      box-sizing: border-box;
      padding: 30px;
      width: 200px;
    }
    h4 {
      text-align: left;
      margin: 10px 10px 10px 0;
      padding-left: 10px;
      border-left: 3px solid blue;
    }
    .role-right {
      // background-color: green;
      text-align: center;
      .col-form {
        width: 100%;
        // height: 100px;
        // background-color: gold;
        .form-content {
          display: inline-block;
          background-color: #fff;
          width: 750px;
          margin-bottom: 100px;
          .form-content-left {
            box-sizing: border-box;
            text-align: left;
            padding-left: 50px;
          }
          .flex {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            & > div {
              width: 290px;
            }
            .ele-style {
              display: inline-block;
              width: 170px !important;
              height: 44px;
              padding: 10px 0;
              background-color: rgb(245, 247, 250);
            }
          }
        }
      }
      .bottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 80px;
        padding-top: 20px;
        transform: translateX(-50%);
        background-color: #fff;
      }
    }
  }
}
</style>
